<template>
  <!-- 发货通知/变更详情 -->
  <div class="content">
    <div class="body">
      <el-card>
        <div slot="header"
             style="text-align:right;margin: -8px 0px;">
          <el-button type="text"
                     @click="handleMark">全部标记为已读</el-button>
        </div>
        <el-table :data="tableData"
                  ref="mytable"
                  highlight-current-row
                  :header-cell-style="{'background-color':'#f5f7fa','color':'#000'}"
                  v-loading="loading">
          <el-table-column prop="content"
                           label="消息内容">
            <template v-slot="{row}">
              <label :class="row.isread?'':'label-info'">
                <el-link target="_blank"
                         v-if="row.type=='notice'"
                         @click="handleLabelInfoClick(row)">{{row.content}}</el-link>
                <el-link target="_blank"
                         v-else-if="row.type=='change'"
                         @click="handleLabelInfoClick(row)">{{row.content}}</el-link>
                <el-link target="_blank"
                         v-else
                         @click="handleLabelInfoClick(row)">{{row.content}}</el-link>
              </label>
            </template>

          </el-table-column>
          <el-table-column prop="date"
                           label="时间"
                           width="250"></el-table-column>
        </el-table>

      </el-card>
    </div>
  </div>

</template>

<script>
export default {
    name: 'messagePrompt',
    data() {
        return {
            loading: false,
            tableData: [],
        };
    },
    created() {
        this.getTableData();
    },
    mounted() {
        // 设置预览区域大小  最少320px
        this.$nextTick(() => {
            let ele = document.getElementsByClassName('content');
            if (ele) {
                this.tableHeight = document.body.clientHeight - ele[0].offsetTop - 130;
                if (this.tableHeight > 300) {
                    this.$refs.mytable && this.$refs.mytable.layout.setHeight(this.tableHeight);
                    this.$refs.mytable && this.$refs.mytable.doLayout();
                }
            }
        });
    },
    methods: {
        getTableData() {
            this.loading = true;
            setTimeout(() => {
                this.tableData = [
                    {
                        id: '111',
                        content: '发货通知',
                        date: '2022-10-05 00:00:00',
                        type: 'notice',
                        isread: false,
                    },
                    {
                        id: 'qweqe',
                        content: '变更通知',
                        date: '2022-10-05 00:00:00',
                        type: 'change',
                        isread: true,
                    },
                    {
                        id: 'eqeq',
                        content: '订单xxxxxxx退货申请已通过，请前往售后管理-退货中查看，并及时将货物寄回',
                        date: '2022-10-05 00:00:00',
                        type: null,
                        isread: false,
                    },
                ];
                this.loading = false;
            }, 800);
        },
        // 全部标记已读
        handleMark() {
            this.$message({ type: 'success', message: '标记成功' });
        },
        // 消息内容点击
        handleLabelInfoClick(row) {
            let { id, type } = row;
            if (type) {
                row.isread = true;
                this.$router.push({ name: 'messagePromptDetail', params: { type, id } });
            } else {
                row.isread = true;
            }
        },
    },
};
</script>



  <style lang="scss" scoped>
.content {
    font-size: 19px;
    .body {
        .el-link.el-link--default {
            color: #333;
            :hover {
                color: #409eff;
            }
        }
        .label-info ::before {
            content: ' ';
            width: 10px;
            height: 10px;
            border-radius: 10px;
            background: red;
            margin: 2px;
        }
    }
}
</style>
